<template>
	<view>
		<view class="search-plus">
			<text>人才库</text>
		</view>
		<view class="search-cont">
			<view class="search-contont flex-align">
				<view class="search-name flex-align">
					<u-icon name="search" color="#BDBDBD"></u-icon>
					<u--text class="siteutext" text="搜索职位名称" color="#BDBDBD" size="32rpx"></u--text>
				</view>
				<u-button type="primary" text="搜索" color="#1872FF"></u-button>
			</view>
			<view class="keyword flex-between">
				<u--text text="为您推荐搜索关键词" color="#BDBDBD" size="24rpx"></u--text>
				<view class="flex-align">
					<u--text text="换一换" color="#BDBDBD" size="24rpx"></u--text>
					<image class="refresh" src="../../../static/refresh.png" mode=""></image>
				</view>
			</view>
			<view class="position flex">
				<view class="positionlist flex-align" v-for="item in keyword">
					<u--text :text="item.key" color="#6D6D6D" size="24rpx"></u--text>
					<image v-show="item.img" class="refresh" :src="item.img" mode=""></image>
				</view>
			</view>
		</view>
		<view class="subscriptions flex">
			<u--text text="我的订阅" color="#3D3D3D" size="28rpx" bold></u--text>
			<u--text text="搜索关键词添加订阅心仪求职者" color="#B8B8B8" size="24rpx"></u--text>
		</view>
		<view class="recomSubscribe flex">
			<view class="title">推荐订阅</view>
			<view class="job-title flex">
				<view class="jobName">
					<u--text text="产品经理" color="#3D3D3D" size="36rpx"></u--text>
					<u--text text="流程管理" color="#B8B8B8" size="28rpx" lineHeight="40rpx"></u--text>
					<u--text text="项目规划" color="#B8B8B8" size="28rpx" lineHeight="40rpx"></u--text>
				</view>
				<u-button class="subsc" type="primary" text="订阅" color="#1872FF"></u-button>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../../component/tabbar/index.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				keyword: [{
						img: '../../../static/fire.png',
						key: '产品经理'
					},
					{
						img: '../../../static/fire.png',
						key: 'UI设计师'
					},
					{
						img: '',
						key: 'C端产品'
					},
					{
						img: '',
						key: '需求分析'
					},
					{
						img: '',
						key: '物流管理'
					},
					{
						img: '',
						key: '模型设计'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	uni-button:after {
		content: none;
	}

	.search-plus {
		padding: 20rpx 16rpx 16rpx 34rpx;
		background-color: white;
	}

	.search-plus text {
		font-size: 48rpx;
		color: #3D3D3D;
		font-weight: bold;
		font-style: italic;
	}

	::v-deep .u-icon__icon span {
		font-size: 56rpx;
		font-weight: bold;
	}

	.search-cont {
		padding: 0rpx 33rpx 44rpx 33rpx;
		background-color: white;
	}

	.search-contont .u-button {
		width: 110rpx;
		height: 80rpx;
		background: #1872FF;
		border-radius: 0rpx 16rpx 16rpx 0rpx;
		border: 2rpx solid #1872FF;
	}

	::v-deep .search-contont .u-button__text span {
		font-size: 32rpx;
	}

	.search-name {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 2rpx 0rpx 0rpx 16rpx;
		border: 2rpx solid #1872FF;
		box-sizing: border-box;
		padding-left: 22rpx;
		column-gap: 5rpx;
		align-items: center;
	}

	.siteutext {
		white-space: nowrap;
	}

	.keyword {
		margin: 18rpx 0rpx;
	}

	.refresh {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
	}

	.position {
		flex-wrap: wrap;
		column-gap: 16rpx;
		row-gap: 16rpx;
	}

	.positionlist {
		/* width: 150rpx; */
		height: 40rpx;
		background-color: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		padding: 0rpx 12rpx 0rpx 12rpx;
	}

	.positionlist .u-text,
	.job-title .u-text {
		white-space: nowrap;
	}

	.subscriptions {
		width: 100%;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 26rpx 36rpx 22rpx;
		column-gap: 16rpx;
	}

	::v-deep .subscriptions .u-text:nth-child(1) {
		flex: 0;
		white-space: nowrap;
	}

	.recomSubscribe {
		margin: 22rpx 0rpx 0rpx 16rpx;
		width: 588rpx;
		height: 208rpx;
		background-color: #FEFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.recomSubscribe .title {
		width: 34rpx;
		padding: 0 16rpx;
		height: 208rpx;
		background-color: #D0E3FF;
		border-radius: 16rpx 0rpx 0rpx 16rpx;
		font-size: 24rpx;
		color: #1872FF;
		text-align: center;
		writing-mode: vertical-rl;
		letter-spacing: 2px;
	}

	.job-title {
		margin: 22rpx 0rpx 0rpx 12rpx;
		flex: 1;
		justify-content: space-between;
	}

	::v-deep .jobName .u-text:nth-child(2) {
		margin-top: 22rpx !important;
		margin-bottom: 6rpx !important;
	}

	::v-deep .subsc {
		width: 140rpx;
		height: 52rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #1872FF;
		background-color: #ffffff !important;
		margin: 0;
		margin-right: 40rpx;
		margin-top: 56rpx;
	}

	::v-deep .subsc span {
		font-size: 24rpx;
		color: #1872FF;
	}
</style>